import React, { Component } from 'react';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import AutoTable from '@/components/AutoTable';
import moment from 'moment';
import IconFont from '@/components/IconFont';
import { useRequest } from 'ahooks';

function DeviceError() {
  return (
    <div>
      <p className="title" style={{ marginBottom: 0 }}>
        <span>
          <ExclamationCircleOutlined style={{ paddingRight: 6 }} />
          设备异常统计
        </span>
      </p>
      <AutoTable
        path="/vehicle-api/charge/device_error_list"
        rowClassName={(record, index) => {
          let className = index % 2 ? 'shallow_gray' : 'deep_gray';
          return className;
        }}
        columns={[
          {
            title: '设备号',
            dataIndex: 'code',
            key: 'code',
            search: false,
          },
          {
            title: '所属小区',
            dataIndex: 'projectName',
            key: 'projectName',
            search: false,
          },
          {
            title: '所属充电区',
            dataIndex: 'areaName',
            key: 'areaName',
            search: false,
            width: 300,
          },
          {
            title: '异常状态',
            dataIndex: 'abnormalNumStr',
            key: 'abnormalNumStr',
            search: false,
            render: (text, row) => {
              return (
                <span>
                  {row?.abnormalNumStr == '1'
                    ? '异常'
                    : row?.abnormalNumStr == '2'
                    ? '严重异常'
                    : '极端异常'}
                </span>
              );
            },
          },
          {
            title: '异常次数',
            dataIndex: 'abnormalNum',
            key: 'abnormalNum',
            search: false,
          },
        ]}
        bordered={false}
        withCard={false}
        style={{ height: 'auto' }}
        onlyTable={true}
        format={'rows'}
      />
    </div>
  );
}

export default DeviceError;
